<template>
	<!-- 加载规划销售人员维护的项目下的设备信息对话框 -->
	<div>
		<v-dialog v-model="equiModel.dialog" width="1400">
			<v-card>
				<v-card-title>选择项目设备</v-card-title>
				<v-card-text>
					<v-row class="mt-2">
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="项目号" v-model="query.projectcode" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="项目名称" v-model="query.projectname" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="设备号" v-model="query.equicode" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="设备名称" v-model="query.equiname" dense outlined>
							</v-text-field>
						</v-col>
						<!-- ml-n16 前面加n是间距 -->
						<!-- class="ml-n16 mx-auto" -->
						<v-col cols="12" sm="3" md="2">
							<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
							<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
								重置</v-btn>
						</v-col>
					</v-row>

					<v-data-table :headers="equiDataHeaderList" :items="equiDataList" small fixed-header item-key="id"
						dense show-select single-select class="text-no-wrap" loading-text="正在加载请稍等......"
						:footer-props="vuetifyDefaultPage" @item-selected="equiSingleCheckEvent">
					</v-data-table>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="primary" class="mr-4" small tile :disabled="this.selectEquiModel==null" @click="ok">确定
					</v-btn>
					<v-btn color="warning" class="mr-4" small tile @click="close">取消</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	export default {
		name: 'ProjectEquiDataList',
		props: {
			callBack: {
				type: Function, //参数类型：函数
			},
			equiModel: {
				dialog: false,
				url: ``
			},
		},
		data: () => ({
			equiDataHeaderList: [{
					text: '设备号',
					align: 'center',
					value: 'code',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '设备名称',
					align: 'center',
					value: 'name',
					filterable: false,
					class: 'fixed'
				}, {
					text: '数量',
					align: 'center',
					value: 'qty',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '型号',
					align: 'center',
					value: 'model',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '项目号',
					align: 'center',
					value: 'project.citemcode',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '项目名称',
					align: 'center',
					value: 'project.citemname',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '单位',
					align: 'center',
					value: 'unit',
					filterable: false,
					class: 'fixed'
				}, {
					text: '描述',
					align: 'center',
					value: 'description',
					filterable: false,
					class: 'fixed'
				},
			],
			equiDataList: [],
			equiLoading: false,
			equiTotalCount: 0,
			equiOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			query: {
				projectcode: '',
				projectname: '',
				equicode: '',
				equiname: '',
			},
			selectEquiModel: null
		}),
		watch: {
			equiModel: {
				handler(newVal) {
					
					this.$emit('update:equiModel', newVal)
					this.loadPages()
				},
				deep: true
			},
			equiOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},
		},

		methods: {
			async loadPages() {
				if (!this.equiModel.dialog) {
					return
				}
				this.equiLoading = true
				var response = await this.$httpRequest({
					url: this.equiModel.url + `
					projectcode=${this.query.projectcode}&
					projectname=${this.query.projectname}&
					equicode=${this.query.equicode}&
					equiname=${this.query.equiname}&
					pageNumber=${this.equiOptions.page}&
						pageSize=${this.equiOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.equiDataList = response.data.result
					this.equiTotalCount = response.data.pagination.totalRecords
					this.equiLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			refreshLoadPages() {
				this.query.projectcode = ''
				this.query.projectname = ''
				this.query.equicode = ''
				this.query.equiname = ''
				this.loadPages()
			},
			equiSingleCheckEvent(select) {
				if (select.value) {
					this.selectEquiModel = select.item
				} else {
					this.selectEquiModel = null
				}
			},
			ok() {
				this.$props.callBack(this.selectEquiModel,this.equiDataHeaderList)
				this.close()
			},
			close() {
				this.selectEquiModel = null
				this.equiModel.dialog = false
				this.equiModel.url = ``
			},
		},
	}
</script>

<style>
</style>
